import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
//引入接口
import {
  getExamSubject,
  getExamType,
  getQuestionType,
  getExamText,
} from '@/services/index';
//引入antd
import { Radio, Select, Tag } from 'antd';
import './_addQusetions.less';
function onChange(e: any) {
  console.log(`radio checked:${e.target.value}`);
}
//考试类型的选择器
const { Option } = Select;
function handleChange(value: any) {
  console.log(`selected ${value}`);
}
function handleChanges(value: any) {
  console.log(`selected ${value}`);
}
// 通过useDispatch拿到派发redux的dispatch
const WatchQuestionsPage: React.FC = () => {
  //试题菜单
  const [watShiti, setShiti] = useState<any[]>([]);
  //题目
  const [watchTimu, setTimu] = useState<any[]>([]);
  //课程
  const [watchChakan, setChakan] = useState<any[]>([]);
  //考试的表单
  const [watchKaoshi, setKaoshi] = useState<any[]>([]);
  const dispatch = useDispatch();
  //题目类型的渲染
  useEffect(() => {
    getQuestionType().then((res) => {
      setTimu(res.data);
      //debugger;
    });
  }, []);
  //课程类型的渲染
  useEffect(() => {
    getExamSubject().then((res) => {
      setChakan(res.data);
      //debugger;
    });
  }, []);
  //考试类型的渲染
  useEffect(() => {
    getExamType().then((res) => {
      setKaoshi(res.data);
      //debugger;
    });
  }, []);
  //试题菜单的渲染
  useEffect(() => {
    getExamText().then((res) => {
      setShiti(res.data);
      //debugger;
    });
  }, []);

  return (
<<<<<<< HEAD
    <div>

      
      <h1>查看试题</h1>
=======
    <div className="wathQuestion">
      {/**题目类型： */}
      <dl>
        <dt>题目类型:</dt>
        <dd>
          <Radio.Group onChange={onChange} defaultValue="a">
            {/**题目类型*/}
            {watchChakan.map((item, index) => {
              return (
                <Radio.Button value={index} key={index}>
                  {item.subject_text}
                </Radio.Button>
              );
            })}
          </Radio.Group>
        </dd>
      </dl>
      {/**考试类型 */}
      <dl>
        <dt>考试类型:</dt>
        <dd>
          <Select style={{ width: 170 }} onChange={handleChanges}>
            {watchKaoshi.map((item, index) => {
              return (
                <Option value={item.exam_id} key={index}>
                  {item.exam_name}
                </Option>
              );
            })}
          </Select>
        </dd>
        {/**题目类型 */}
        <dt>课程类型:</dt>
        <dd>
          <>
            <Select style={{ width: 170 }} onChange={handleChange}>
              {watchTimu.map((item, index) => {
                return (
                  <Option value={index} key={index}>
                    {item.questions_type_text}
                  </Option>
                );
              })}
            </Select>
          </>
        </dd>
      </dl>
      {/**试题菜单 */}
      {watShiti.map((item: any, index: any) => {
        return (
          <div key={index} id="textone">
            <p> {item.title} </p>          
            <p>
              <Tag color="#2db7f5">{item.questions_type_text}</Tag> 
              <Tag color="#2db7f5">{item.subject_text}</Tag> 
              <Tag color="#f50">{item.exam_name}</Tag>       
            </p>
            <p style={{ color: '#2db7f5' }}>  {item.user_name}发布 </p>         
            <span className="bian">编辑 </span>
          </div>
        );
      })}
>>>>>>> wwz
    </div>
  );
};

export default WatchQuestionsPage;
